<template>
  <div class="map">
    <div class="keyword">
      <span>地区关键词:</span>
      <el-input v-model="input" placeholder="请输入地区关键词" />
      <button v-show="false" ref="button" @click="huan">换中心点</button>
    </div>
    <div class="container">
      <baidu-map
        class="bm-view"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @ready="handler"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infoList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 3,
      map: null,
      BMap: null,
      input: ''
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.button.click()
    })
  },
  methods: {
    handler({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    huan() {
      console.log(this.infoList)
      this.input = this.infoList.name
      this.center.lng = this.infoList.longitude
      this.center.lat = this.infoList.latitude
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  padding: 20px;
  .keyword {
    span {
      color: #20232a;
      font-weight: 400;
      font-size: 14px;
    }
    .el-input {
      width: 230px;
      margin-bottom: 20px;
    }
  }
}
</style>

<style lang="scss" scoped>
.container {
  height: 668px;
}
</style>

<style>
.container {
  width: 100%;
  height: 100%;
}
.bm-view {
  width: 100%;
  height: 100%;
}
</style>
